<template>
  <div class="body_" :style="{'height': height + 'px'}">
    <div class="search">
      <el-input v-model="keyword" placeholder="请输入关键字" clearable size="small" prefix-icon="el-icon-search"/>
    </div>
    <div class="elTree1">
      <el-tree ref="tree" :data="houseDevices" :default-expanded-keys="expandedIds" :expand-on-click-node="false" :filter-node-method="filterNode" highlight-current node-key="id" @node-click="handleNodeClick">
        <span class="custom-tree-node" slot-scope="{ node, data }">
           <svg-icon  class-name="treeIconOther" icon-class="nhgk_park" /> {{ '  ' }}

          <span  class="custom-tree-node-label">{{ node.label +' '+'('+data.deviceNum+')' }}</span>
<!--              <span  class="custom-tree-node-label">{{ node.label }}</span>-->
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {getHouseWithoutDeviceShowMax} from "@/api/components/treeSelect/treeData";



export default {
  name: "gardenSelect",
  data() {
    return {
      keyword: undefined,
      expandedIds: ['0'],
      height: window.innerHeight * this.getRatio() - 100,
      houseDevices: []
    }
  },
  watch: {
    keyword(val) {
      this.$refs.tree.filter(val);
    },
    '$store.state.app.screenHeight': function () { //监听屏幕高度变化
      this.height=window.innerHeight * this.getRatio() - 100;
    }
  },

  computed: {
    ...mapGetters(['mainColor'])
  },
  created() {
    this.getHouseDevices();
  },
  methods: {
    getHouseDevices() {
      getHouseWithoutDeviceShowMax({ "params": { "maxLevel": 3 }}).then(res => {
        this.houseDevices = res.data
        // let tenantName = this.$store.getters.buildTreeTopName;
        let num = 0;
        if (this.houseDevices) {
          this.houseDevices.forEach(item => {
            if (item.deviceNum) {
              num += item.deviceNum
            }
          })
        }
        this.houseDevices = [{ id: '0', label: "兴筑管理园区", key: 'garden', deviceNum: num, children: this.houseDevices }]
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(a, node, c) {
      // console.log(a, node, c)
      let location = []
      while (node.level !== 0) {
        location.unshift(node.data.label)
        node = node.parent
      }


      this.$emit('nodeClick', a.id, a.label)
    },
    refresh() {
      this.$refs.tree.setCurrentKey(null)
    }
  }
}
</script>

<style scoped>
.treeIcon {
  font-size: 16px;
  color: #409EFF;
}

.treeIconOther {
  height: 13px !important;
  width: 13px !important;
  vertical-align: -2px !important;
}

.search {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 13px;
  padding-bottom: 10px;
}

.body_ {
  /*box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);*/
  background-color: #fff;
  position: relative;
}

.elTree1 {
  height: calc(100% - 63px);
  overflow-y: auto;
}

/deep/.el-tree-node > .el-tree-node__children {
    overflow: visible;
}
</style>
